<template>
  <div
    class="preview-view">
    <template v-if="fileType==='image' || filePath.search('data:image/jpg;base64') != -1">
      <el-image-viewer
        :on-close="closePreview"
        :url-list="[filePath]" />
    </template>
    <template v-else-if="fileType==='audio'">
      <div class="file__preview">
        <div class="file_mask">
          <div
            class="file-viewer__close"
            @click="closePreview">
            <i class="el-icon-circle-close" />
          </div>
        </div>
        <div class="iframe-view">
          <audio
            style="height: 100%; width: 100%; align: middle;"
            controls
            autoplay>
            <source :src="filePath">
          </audio>
        </div>
      </div>
    </template>
    <template v-else-if="fileType==='video'">
      <div class="file__preview">
        <div class="file_mask">
          <div
            class="file-viewer__close"
            @click="closePreview">
            <i class="el-icon-circle-close" />
          </div>
        </div>
        <div class="iframe-view">
          <video
            :src="filePath"
            controls
            autoplay
            width="100%"
            height="100%"></video>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="file__preview">
        <div class="file_mask">
          <div
            class="file-viewer__close"
            @click="closePreview">
            <i class="el-icon-circle-close" />
          </div>
        </div>
        <div class="iframe-view">
          <iframe
            autoplay
            height="100%"
            width="100%"
            align="middle"
            :src="filePath" />
        </div>
      </div>
    </template>
  </div>
</template>
<script>
// 导入组件
  import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
  export default {
    name: 'PreviewFile',
    components: { ElImageViewer },
    props: {
      file: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        fileType: null,
        viewSrc: 'https://view.officeapps.live.com/op/view.aspx?src='
      }
    },
    computed: {
      filePath() {
        if (this.file.url && this.file.url.search('data:image/jpg;base64') != -1) {
          return this.file.url
        }
        const url = `${process.env.VUE_APP_ADMIN_API}/${this.file.url}`
        if (this.fileType !== 'image' && this.fileType !== 'audio' && this.fileType !== 'video' && this.fileType !== 'pdf') {
          return `${this.viewSrc}${process.env.VUE_APP_ADMIN_API}/${this.file.url}`
        }
        return url
      }
    },
    destroyed() {
      document.querySelector('.fixed-header').style.zIndex = 9
      document.querySelector('.sidebar-container').style.zIndex = 1001
    },
    mounted() {
      document.querySelector('.fixed-header').style.zIndex = 0
      document.querySelector('.sidebar-container').style.zIndex = 0
      if (this.file.type) {
        this.fileType = this.file.type
        return
      }
      try {
        const suffix = this.file.url.substr(this.file.url.lastIndexOf('.') + 1)
        if (this.file.fileContentType) {
          const r = this.file.fileContentType.split('/')
          this.fileType = r[1] == 'pdf' ? r[1] : r[0]
          return
        }
        if (suffix == 'png' || suffix == 'img' || suffix == 'jpeg' || suffix == 'jpg') {
          this.fileType = 'image'
          return
        } else if (suffix == 'aac' || suffix == 'mp3') {
          this.fileType = 'audio'
          return
        } else if (suffix == 'mp4') {
          this.fileType = 'video'
          return
        } else if (suffix == 'pdf') {
          this.fileType = 'pdf'
          return
        }
        this.fileType = 'application'
      } catch (e) {
        throw e
      }
    },
    methods: {
      closePreview() {
        this.$emit('closePreview')
      }
    }
  }
</script>
<style lang="scss" scoped>
/deep/ .el-image-viewer__canvas img{
  background: #fff;
  padding: 12px;
}
.backG{
  background: #fff;
}
.file__preview {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  .file_mask {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
    background: #000;
    .file-viewer__close {
      position: absolute;
      top: 40px;
      right: 40px;
      width: 40px;
      height: 40px;
      font-size: 40px;
      color: #ddd;
      cursor: pointer;
    }
  }
  .iframe-view {
    height: 100%;
    width: 90%;
    margin: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
  }
}
</style>
